import React from 'react'
import styled from 'styled-components'

import Flex from '../components/Flex'
import Fixed from '../components/Fixed'
import Config from '../utils/config.js'

import ImageTurtle from '../images/turtle.png'
import { IconTurtle } from './common/'

const TurtleArea = ({
    isTurtleFullscreen,
    showSidebar,
    renderTurtleTitle,
    ...others
}) => {
    return (
        <React.Fragment>
            {isTurtleFullscreen && (
                <TurtleAreaFullTitle>{renderTurtleTitle()}</TurtleAreaFullTitle>
            )}
            <Container {...others} auto center showSidebar={showSidebar}>
                <div id="turtle-area">
                    <IconTurtle src={ImageTurtle} />
                </div>
                <XY showSidebar={showSidebar} />
            </Container>
            <TurtleAreaFullScreen isTurtleFullscreen={isTurtleFullscreen}>
                <div id="turtle-area-fullscreen" />
                <XYFull />
            </TurtleAreaFullScreen>
        </React.Fragment>
    )
}

export default TurtleArea

const XY = styled('canvas').attrs({
    id: 'xy',
    width: '400px',
    height: '400px',
})`
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 9;
    flex: none;
`

const XYFull = styled('canvas').attrs({
    id: 'xy-full',
    width: document.body.clientWidth + 'px',
    height: document.body.clientHeight + 'px',
})`
    position: absolute;
    z-index: ${Config.fullScreenIndex};
    flex: none;
    left: 0;
    right: 0;
    bottom: 0;
`

const Container = styled(Flex)`
    background: #fff;
    flex: 0 0 400px;
    visibility: ${({ showSidebar }) => (showSidebar ? 'visible' : 'hidden')};
    position: relative;
`

const TurtleAreaFullTitle = styled(Fixed)`
    height: ${Config.turtleTitleHeight}px;
    bottom: auto;
    z-index: ${Config.fullScreenIndex};
`
const TurtleAreaFullScreen = styled(Flex)`
    position: fixed;
    // height: 100%;
    width: 100%;
    top: ${Config.turtleTitleHeight}px;
    bottom: 0;
    left: 0;
    z-index: ${Config.fullScreenIndex};
    overflow: hidden;
    background: #fff;
    display: ${({ isTurtleFullscreen }) =>
        isTurtleFullscreen ? 'block' : 'none'};
`



// WEBPACK FOOTER //
// ./src/containers/TurtleArea.js